<!-- 我的 - VIP - 开通VIP -->
<template>
  <view>
    <z-navbar title="我的会员" :border-bottom="false" bg-color="#44454A" title-color="#fff"></z-navbar>
    <view class="bg-#44454A h-430">
      <u-tabs bg-color="none" :is-scorll="false" :list="state.tabList" bar-height="6" bar-width="44" active-color="#fff"
        inactive-color="#999" font-size="32" :bar-style="barStyle" v-model="state.currentIndex" @change="onTabChange" />
      <view class="relative mt-6 flex justify-center">
        <image class="w-686 h-262" src="/static/images/user/bg_vip_center.png"></image>
        <!-- 会员信息 -->
        <view class="w-686 h-262 absolute">
          <image :class="['absolute', vipLevelNum > 1 ? 'w-48 h-40 left-26 top-36' : 'w-92 h-66 left-28 top-22']"
            :src="`/static/images/user/ic_vip_center_${vipLevelIcon}.png`"></image>
          <view style="color:#633A21"
            :class="['absolute text-32 font-bold', vipLevelNum > 1 ? 'left-78 top-32' : 'left-126 top-32']">
            {{ vipLevelLabel }}</view>
          <view class="tag-privilege absolute left-30 top-98">尊享专属<text class="text-40 font-bold mx-1">{{
            state.vipRightsList.length }}</text>大特权</view>
          <view class="tag-status absolute top-0 right-0">{{ state.detailData?.is_current ? '已开通' : '未开通' }}</view>
          <view v-if="state.detailData?.is_current" class="absolute right-20 top-70 c-#643B22 text-24">{{
            state.detailData?.time_remaining }}</view>
          <view v-else class="absolute right-20 top-70 c-#643B22 text-24">会员有效期<text class="ml-3">365天</text></view>
        </view>
      </view>

    </view>
    <!-- 主体内容 -->
    <view class="card-content relative z-3 mt--13">
      <view class="flex items-center mb-4">
        <view class="bg-#F4AF22 h-36 w-6" />
        <view class="c-#333 text-32 font-bold ml-4">专享权益</view>
      </view>
      <view class="grid grid-cols-4 gap-4">
        <view v-for="(item, index) in state.vipRightsList" :key="index" class="flex flex-col items-center">
          <image class="w-88 h-88" :src="item.icon" />
          <view class="mt-1 c-#333 text-24 text-center">{{ item.label }}</view>
        </view>
      </view>
      <view v-if="vipLevelNum > 1 && state.detailData && state.detailData.offline_right">
        <view class="flex items-center my-4">
          <view class="bg-#F4AF22 h-36 w-6" />
          <view class="c-#333 text-32 font-bold ml-4">线下权益</view>
        </view>
        <view class="grid grid-cols-4 gap-4">
          <view v-for="(item, index) in state.detailData.right_info" :key="index" class="flex flex-col items-center">
            <image class="w-88 h-88 rounded-full" :src="item.image" />
            <view class="mt-1 c-#333 text-24 text-center">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 普通vip显示 -->
    <view v-if="vipLevelNum == 1" class="flex items-center justify-center h-40 bottom-wrap-150">
      <view @click="state.agree = !state.agree">
        <image v-if="state.agree" class="w-24 h-24" src="/static/images/user/ic_agree.png"></image>
        <view v-else class="bg-#E0E0E0 w-24 h-24 rounded-full"></view>
      </view>
      <view class="c-#666 text-24 ml-1">开通请阅读<text class="c-#F4AF22"
          @click="navigate('/package_user/pages/common/rule?title=会员服务协议&type=vipRule')">《会员服务协议》</text>以及<text
          class="c-#F4AF22" @click="navigate('/package_user/pages/common/rule?title=隐私协议&type=privateRule')">《隐私协议》</text>
      </view>
    </view>
    <view class="h-200"></view>
    <view class="bottom-wrap-16 bg-white">
      <u-line color="#eee" />
      <view class="flex items-center justify-between mt-1 px-4">
        <view class="flex items-end">
          <view class="c-#FF513A text-36 font-bold">￥{{ state.detailData?.price }}</view>
          <view class="number-minus text-28 c-#999 ml-1">￥{{ state.detailData?.origin_price }}</view>
        </view>

        <view class="btn-open relative" @click="onApply">
          <image class="absolute z-1 w-342 h-76"
            :src="`/static/images/user/bg_vip_${vipLevelNum > 1 && state.detailData?.is_apply ? 'disabled' : 'open'}.png`">
          </image>
          <!-- 提交申请/提交续费申请 -->
          <view class="relative z-2">{{ formatBtnName() }}</view>
        </view>
      </view>
    </view>
    <!-- 申请弹窗 -->
    <u-modal v-model="state.showApplyModal" :show-title="false" border-radius="12" :show-cancel-button="false"
      :show-confirm-button="false">
      <view class="slot-content">
        <view @click="state.showApplyModal = false" class="absolute top-0 right-17 w-166 h-166 flex justify-end">
          <image class="mt-3 mr-2 w-22 h-22" src="/static/images/home/ic_delete.png" />
        </view>

        <view class="flex justify-center items-center">
          <image :class="[vipLevelNum > 0 ? 'w-48 h-40' : 'w-92 h-66']"
            :src="`/static/images/user/ic_vip_center_${vipLevelIcon}.png`"></image>
          <view class="#633A21 text-32 font-bold ml-1">{{ vipLevelLabel }}申请</view>
        </view>
        <view class="relative mt-4 mb-3">
          <view class="flex items-center">
            <view class="w-150">姓名:</view>
            <view class="flex-1 c-#333">
              <u-input v-model="state.applyForm.real_name" placeholder="请填写你的真实姓名"
                placeholder-style="color: #999; fontSize: 28rpx" :custom-style="inputStyle" />
            </view>
          </view>
          <view class="flex items-center">
            <view class="w-150">手机号:</view>
            <view class="flex-1 c-#333">
              <u-input v-model="state.applyForm.mobile" placeholder="请填写你的手机号"
                placeholder-style="color: #999; fontSize: 28rpx" :custom-style="inputStyle" />
            </view>
          </view>
          <view class="flex items-center">
            <view class="w-150">生日:</view>
            <view class="flex-1 h-70 flex items-center text-28" :class="[state.applyForm.birthday ? 'c-#333' : 'c-#666']"
              @click="state.showBirthPicker = true">{{ state.applyForm.birthday || '请选择生日' }}</view>
          </view>
        </view>
        <view class="flex items-center justify-center">
          <view class="btn-save" @click="onSubmit">提交</view>
        </view>
      </view>
    </u-modal>
    <!-- 报名成功弹窗 -->
    <u-modal v-model="state.showSuccessModal" :show-title="false" border-radius="12" :show-confirm-button="false">
      <view class="slot-content">
        <view @click="state.showSuccessModal = false" class="absolute top-0 right-17 w-166 h-166 flex justify-end">
          <image class="mt-3 mr-2 w-22 h-22" src="/static/images/home/ic_delete.png" />
        </view>

        <view class="text-center c-#333 text-sm my-10">
          会员报名成功，请注意接听来自【福建拓普旺网络科技有限公司】的工作人员
        </view>
        <view class="flex items-center justify-center">
          <view class="btn-save" @click="state.showSuccessModal = false">知道了</view>
        </view>
      </view>
    </u-modal>
    <u-picker v-model="state.showBirthPicker" mode="time" :params="dateParams" confirm-color="#F4AF22"
      @confirm="onDateConfirm($event)" />
  </view>
</template>

<script setup>
import { navigate, showToast } from "@/common/util/uni";
import { getVipList, postVipAdd, postVipApply } from '@/common/http/module/vip'
import { getVipInfo } from '@/common/http/module/vip.js'
import { wxPay } from '@/common/util/wx'
import { useUserStore } from '@/store/user.js'

const userStore = useUserStore()

const state = reactive({
  vipList: [], // 会员列表
  tabList: [],
  currentIndex: 0,
  tabCurrent: null,
  detailData: '', // 当前激活tab会员详情数据
  vipRightsList: [], // 当前会员的专享权益
  agree: false,
  showBirthPicker: false,
  showApplyModal: false,
  showSuccessModal: false,
  applyForm: {
    real_name: '',
    mobile: '',
    birthday: ''
  }
});

const inputStyle = {
  backgroundColor: 'none',
  borderRaduis: '12rpx',
}
const barStyle = {
  backgroundColor: '#F4AF22'
}
const dateParams = {
  year: true,
  month: true,
  day: true,
  hour: false,
  minute: false,
  second: false
}
// 会员等级
const vipLevelList = [
  { label: '会员', icon: 'common', level: 1, value: 0 },
  { label: '黄金会员', icon: 'gold', level: 2, value: 1 },
  { label: '铂金会员', icon: 'platinum', level: 3, value: 2 },
  { label: '钻石会员', icon: 'diamond', level: 4, value: 3 },
]

// 会员等级名称
const vipLevelLabel = computed(() => {
  return vipLevelList.find(v => v.value == state.currentIndex)?.label
})
// 会员等级icon
const vipLevelIcon = computed(() => {
  return vipLevelList.find(v => v.value == state.currentIndex)?.icon
})

// 会员等级: 1=VIP,2=黄金会员,3=铂金会员,4=钻石会员
const vipLevelNum = computed(() => {
  return vipLevelList.find(v => v.value == state.currentIndex)?.level
})

// tab栏切换
function onTabChange(i) {
  state.currentIndex = i
  state.detailData = state.vipList[i]
  onVipRights(state.detailData)
  console.log('detailData', state.detailData);
}

// 获取对应vip的会员权益列表
function onVipRights(currentData) {
  const vipRightsList = [
    { icon: '/static/images/user/ic_vip_rights1.png', label: `创建学社x${currentData.club_number}`, show: currentData.club_number > 0 },
    { icon: '/static/images/user/ic_vip_rights2.png', label: '免费视频课程', show: currentData.free_watch },
    // { icon: '/static/images/user/ic_vip_rights3.png', label: '观看直播', show: true },
    { icon: '/static/images/user/ic_vip_rights4.png', label: '创建年规', show: currentData.create_plan },
    { icon: '/static/images/user/ic_vip_rights5.png', label: '私董会服务', show: currentData.private_service },
    { icon: '/static/images/user/ic_vip_rights6.png', label: '课程折扣', show: true },
    { icon: '/static/images/user/ic_vip_rights7.png', label: '专家答疑', show: true },
    { icon: '/static/images/user/ic_vip_rights8.png', label: '在线考试', show: true },
  ]
  state.vipRightsList = vipRightsList.filter(v => v.show)
}

function onDateConfirm(e) {
  console.log('onDateConfirm', e)
  const { year, month, day } = e
  state.applyForm.birthday = `${year}-${month}-${day}`
  state.showBirthPicker = false
}

// 格式化操作按钮名称
function formatBtnName() {
  if (state.detailData) {
    let btnName = ''
    const { is_buy, is_current, is_apply } = state.detailData
    // vip: 立即开通/立即续费
    // 其他高等级vip: 提交申请/已提交申请/提交续费申请
    if (is_buy) {
      btnName = is_current ? '立即续费' : '立即开通'
    } else {
      btnName = is_current ? '提交续费申请' : is_apply ? '已提交申请' : '提交申请'
    }
    return btnName
  }
}

function onApply() {
  const { is_buy } = state.detailData
  // 高级会员且已提交申请不再下一步操作
  if (vipLevelNum.value > 1 && state.detailData?.is_apply) return
  if (vipLevelNum.value == 1 && !state.agree) {
    showToast('请先阅读会员服务协议以及隐私协议~', 'error')
    return
  }
  if (is_buy) {
    if (!state.agree) {
      showToast('请先勾选协议')
      return
    }
    postVipAdd({ vip_id: state.vipList[state.currentIndex]?.id }).then(res => {
      wxPay(res.data)
        .then(() => {
          showToast('支付成功', '')
          loadData()
          userStore.loadUserInfo()
        }).catch(() => {
          showToast('支付失败', 'error')
        })
    })
  } else {
    state.showApplyModal = true
  }
}

function onSubmit() {
  if (!state.applyForm.real_name || !state.applyForm.mobile || !state.applyForm.birthday) {
    showToast('请填写信息', 'error')
    return
  }
  postVipApply({
    vip_id: state.vipList[state.currentIndex]?.id,
    real_name: state.applyForm.real_name,
    mobile: state.applyForm.mobile,
    birthday: state.applyForm.birthday,
  }).then(() => {
    showToast('申请成功')
    loadData()
    state.showApplyModal = false
    state.showSuccessModal = true
  })
}

async function loadData() {
  state.vipInfo = await getVipInfo()?.data

  const { data } = await getVipList()
  state.tabList = data.map(v => {
    return {
      id: v.id,
      name: v.name
    }
  })
  state.currentIndex = state.tabCurrent ?? state.currentIndex
  state.tabCurrent = null
  state.vipList = data
  state.detailData = state.vipList[state.currentIndex]
  onVipRights(state.detailData)
  console.log('detailData', state.detailData);

}

onLoad(options => {
  state.tabCurrent = options?.tabCurrent ?? null
  loadData()
})
</script>

<style lang="scss" scoped>
/* 添加数字中划线样式 */
.number-minus {
  text-decoration: line-through;
}

.tag-privilege {
  padding: 8rpx 20rpx;
  border-radius: 12rpx;
  border: 2rpx solid rgba(159, 103, 76, .5);
  font-size: 28rpx;
  color: #643B22;
}

.tag-status {
  padding: 8rpx 32rpx;
  border-radius: 0rpx 12rpx 12rpx 0rpx;
  background: linear-gradient(81.87deg, rgba(248, 218, 188, 1) 0%, rgba(248, 218, 188, 1) 0.98%, rgba(251, 242, 227, 1) 46.66%, rgba(251, 242, 227, 1) 100%);
  color: #643B22;
  font-size: 28rpx;
}

.card-content {
  padding: 40rpx 32rpx;
  border-radius: 12rpx 12rpx 0rpx 0rpx;
  background-color: #FFFFFF;
}

.btn-open {
  width: 342rpx;
  height: 76rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #643B22;
  font-size: 28rpx;
}

.slot-content {
  position: relative;
  padding: 24rpx 40rpx 40rpx;
}

.btn-save {
  width: 100%;
  height: 68rpx;
  line-height: 68rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
  background-color: #F4AF22;
}

:deep(.u-tabs) {
  width: 100% !important;
}

:deep(.u-scroll-box) {
  display: flex;
}

:deep(.u-tab-item) {
  flex: 1;
}
</style>
